<template>
  <div class="fullMain">
    <!--插入验证提示框-->
    <div v-transfer-dom>
      <alert v-model="isShowAlert">{{ alertText }}</alert>
    </div>
    <div v-transfer-dom>
      <confirm
        v-model="showConfirm"
        title="发布成功！"
        @on-confirm="onConfirm"
        @on-cancle="onCancle"
      >
        <p style="text-align: center">继续创建【阶段目标】吗？</p>
      </confirm>
    </div>
    <!--顶部标题 -->
    <div style="position: fixed; width: 100%">
      <x-header
        class="header"
        :left-options="{ backText: '发布任务', showBack: true }"
      >
        <a slot="right" @click="saveModify">提交</a>
      </x-header>
    </div>
    <div style="height: 20px; background-color: rgb(237, 237, 237)" />
    <group class="taskWrap">
      <x-input
        title="任务标题："
        v-model="taskTitle"
        :show-clear="false"
      ></x-input>
      <x-textarea title="任务简介：" v-model="taskContent"></x-textarea>
      <cell
        class="leaderChoose"
        title="负责人："
        :link="{ name: 'ChooseMember', params: { leaderOrMember: 'leader' } }"
      >
        <div class="choosedAvatar" v-if="this.leaderChoosedItem !== undefined">
          <div v-for="(item, index) in leaderChoosedItem" :key="index">
            <img :src="item.detail.avatar" />
          </div>
        </div>
      </cell>
      <cell
        class="leaderChoose"
        title="成员："
        :link="{
          name: 'ChooseMember',
          params: {
            leaderOrMember: 'member',
          },
        }"
      >
        <div class="choosedAvatar" v-if="this.memberChoosedItem !== undefined">
          <div v-for="(item, index) in memberChoosedItem" :key="index">
            <img :src="item.detail.avatar" />
          </div>
        </div>
      </cell>
      <calendar
        title="截止日期："
        v-model="deadline"
        :return-six-rows="falses"
      ></calendar>
    </group>
  </div>
</template>

<script>
import {
  XHeader,
  Group,
  XInput,
  XTextarea,
  Cell,
  Confirm,
  Calendar,
} from "vux";
import { compareByPinyin } from "utilMethods/sort.js";
import task from "api/task";
export default {
  components: {
    XHeader,
    Group,
    XInput,
    XTextarea,
    Cell,
    Confirm,
    Calendar,
  },
  data() {
    return {
      alertText: "",
      isShowAlert: false,
      showConfirm: false, //确认框
      taskTitle: localStorage.getItem("taskTitle"),
      taskContent: localStorage.getItem("taskContent"),
      leaderChoosedItem: [],
      memberChoosedItem: [],
      executors: [], //执行人
      principal: [], //负责人
      taskItem: "", //任务的内容
      deadline: "", //任务的截止日期
    };
  },

  mounted() {
    this.getInitData();
  },
  watch: {
    taskTitle(val) {
      localStorage.setItem("taskTitle", val);
    },
    taskContent(val) {
      localStorage.setItem("taskContent", val);
    },
  },
  methods: {
    showAlert(alertText) {
      this.isShowAlert = true;
      this.alertText = alertText;
    },
    closeTip() {
      this.isShowAlert = false;
      this.alertText = "";
    },
    // 获取初始化信息，负责人和执行人的列表
    getInitData() {
      let leaderChoosedItemTemp = localStorage.getItem("leaderChoosedItem");
      let memberChoosedItemTemp = localStorage.getItem("memberChoosedItem");
      if (!!leaderChoosedItemTemp) {
        this.leaderChoosedItem = JSON.parse(leaderChoosedItemTemp);
      }
      if (!!memberChoosedItemTemp) {
        this.memberChoosedItem = JSON.parse(memberChoosedItemTemp);
      }
    },
    // 点击提交的操作
    async saveModify() {
      if (this.judgeTaskData()) {
        this.taskItem = this.createTaskData();
        const result = await task.postAddTask(this.taskItem);
        if (result.code === 1) {
          localStorage.setItem("leaderChoosedItem", "");
          localStorage.setItem("memberChoosedItem", "");
          localStorage.setItem("taskTitle", "");
          localStorage.setItem("taskContent", "");
          this.taskItem.projectId = result.data;
          this.showConfirm = true;
        } else {
          this.showAlert("发布失败");
        }
      }
    },
    // 创建提交任务的数据格式,并判断
    createTaskData() {
      let task = {
        deadline: this.deadline,
        detail: {
          principal: [],
          executors: [],
          title: this.taskTitle,
          introduction: this.taskContent,
        },
        projectId: "",
      };
      this.leaderChoosedItem.forEach((element) => {
        let temp = {
          iswork: true,
          userId: element.userId,
        };
        task.detail.principal.push(temp);
      });
      this.memberChoosedItem.forEach((element) => {
        let temp = {
          iswork: true,
          userId: element.userId,
        };
        task.detail.executors.push(temp);
      });
      return task;
    },
    // 判断提交任务的数据是否满足要求
    judgeTaskData() {
      if (this.taskTitle === "" || this.taskTitle === undefined) {
        this.showAlert("请输入【任务标题】");
        return false;
      } else if (this.taskContent === "" || this.taskContent === undefined) {
        this.showAlert("请输入【任务简介】");
        return false;
      } else if (this.leaderChoosedItem.length == 0) {
        this.showAlert("请选择【负责人】");
        return false;
      } else if (this.memberChoosedItem.length == 0) {
        this.showAlert("请选择【成员】");
        return false;
      } else {
        return true;
      }
    },
    async onConfirm() {
      const result = await task.postGetOneTask(this.taskItem.projectId);
      let temp = result.data;
      // 把taskItem存到缓存.这里不直接使用taskItem，因为数据不全
      localStorage.setItem("taskItem", JSON.stringify(temp));
      this.$router.push({
        name: "TaskView",
      });
    },
    onCancle() {
      this.$router.go(-1);
    },
  },
};
</script>

<style scoped>
.header {
  /* background-color: white; */
}
.header a {
  color: white;
  font-size: 14px;
  /* background-color: #EDEDED;
  border-radius: 5px;
  padding: 3px 10px; */
}
.vux-popup-dialog .vux-popup-bottom .vux-popup-show {
  max-height: 250px;
}
.vux-popup-dialog .weui-cells_radio {
  max-height: 250px;
}

/* 发布任务内容 */
.taskWrap {
}
.taskWrap .leaderChoose {
}
.taskWrap .leaderChoose .choosedAvatar {
  display: flex;
  max-width: 170px;
  max-height: 70px;
  flex-wrap: wrap;
}
.taskWrap .leaderChoose .choosedAvatar img {
  width: 30px;
  height: 30px;
  padding: 2px;
  padding-bottom: 0;
}
</style>